<!DOCTYPE html><html>
    <head>
        <title>HTML 文档结构</title>
        <link rel="stylesheet" href="index.css"/>

    </head>
    <body style="color：black;">
        
        <div class="main">
            <div class="row">
             <input class="input" type="text" id ="inputtext" onkeyup="keyup(event)"/>
             <input type="button" name="bt" value="确认1" onclick="handleClick(event)"/>
             <input type="button" name="bt" id="button2" value="确认2" />
            </div>

            <div id="todogroup">
                <!--
                <div id="todo0"><input type="checkbox" name="todocheck">吃饭<button type="button" onclick="deleByIndex()">删除</button></div>
                <div>睡觉</div>
                -->

                <!-- 
                    todo项
                -->
            </div>
            

            <!-- <span style="color:blue">asd&nbsp;&nbsp;&nbsp;asd</span>     -->
        </div>


    </body>
    <script lang="javascript">
        var intCnt = 0 ;

        function init(){
            document.getElementById("button2").onclick = handleClick;
            //
        }

         function keyup(e){
             console.log(e);
            if(e.keyCode == 13){ 
            handleClick();
            }
         }

        // console.log('xxx');
        // document.getElementById("button2").onclick = handleClick;
        // console.log('xxxxxx');


        function handleClick(e){
            console.log('handleClick');
            console.log(e);

            var temp = getValue();

            // var temp = document.getElementById("inputtext");
            // console.log(temp.value);

            ////document.getElementById("todugroup").innerHTML = "<div>" + temp + "</div>"
           

            // var div = document.createElement('div');
            // div.innerText = temp;
            // document.getElementById("todogroup").append(div);
            
            // document.getElementById("todogroup").innerHTML += "<div id='todo"
            //  + intCnt + "'><input type='checkbox' name='todocheck'> "
            //  + temp +"<button type='button' onclick='deleByIndex("
            //  + intCnt + ")'>删除</button></div>"             ;

            document.getElementById("todogroup").innerHTML +="<div class='item' id='todo"
                + intCnt+"'><input type ='checkbox' name='todocheck'><div class='item-value'> "
                + temp+ "</div><button class='item-del' type='button' onclick='deletByIndex("
                + intCnt + ")'>删除</button></div>";
            document.getElementById("inputtext").value="";
            intCnt++;

            //document.getElementsByClassName("main")[0].style = "background-color: #333333;";
        }
        
        function getValue(){
            var temp = document.getElementById("inputtext");
            console.log(temp.value);
            return temp.value;
        }

        function deletByIndex(index){
            document.getElementById("todo"+index).remove();
        }

        function enter(id){
            document.getElementById(id).style='background-color:#3e3a3a'

        }
        function leave(id){
            document.getElementById(id).style='background-color:aliceblue'
        }
        

    </script>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        color: chartreuse;
    }
    .main {
        background-color:darkgrey;
        /* width: 200px; */
        height: 200px;
    }
    .row {
        display: flex;
    }
    .item{
        display:flex;
        align-items:center;
        margin:6px;
        padding:3px;
    }
    .item:hover{
        background-color:dimgrey;
    }
    .item-value{
        flex-grow:1;
        color:black;
    }
    .item-del{
        color:black;
        background-color:aliceblue;
        border:0px;
        opacity:0;
    }
    .item:hover .item-del{
        opacity:1;
    }
    .input{
        padding:0px;
        outline:none;
        border:2px solid #111111;
    }
    .input:focus{
        box-shadow:0px 0px 10px #111111;
        border:2px solid #111111;
    }
</style>

</html>